<template>
  <div class="unique">
    <Title title="独家放送"></Title>
    <!-- <ul class="list">
      <li class="item" v-for="item in lists" :key="item.id">
        <router-link :to="{ path: `/video/${item.id}` }">
          <img :src="item.picUrl" alt="" />
        </router-link>
        <p>
          {{ item.name }}
        </p>
        <Ico></Ico>
      </li>
    </ul> -->
    <MvItem :lists='lists'></MvItem>
  </div>
</template>

<script>
import Title from "./Title";
import axios from "@/utils/axios";
import MvItem from './common/MvItem'
export default {
  name: "Unique",
  data() {
    return {
      lists: [],
    };
  },
  components: {
    Title,
    MvItem
  },
  created() {
    axios.get("/personalized/privatecontent").then((res) => {
      this.lists = res.result;
    });
  },
};
</script>

<style lang="scss" scoped>
.unique {
  margin-top: 2rem;
  .list {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    .item {
      position: relative;
      img {
        width: 24rem;
        height: 12rem;
        border-radius: 0.4rem;
      }
      p {
        height: 4.2rem;
        width: 25rem;
        overflow: hidden;
      }
    }
  }
}
</style>